<template>
    <div class="pay">
        <div class="iconfont icon-zuo  top" @click="$router.replace({name:'order'})"></div>
        <div class="center ">
            <div class="txtf">合约签订成功</div>
            <div class="txts">支付定金立即生效</div>
            <div class="txtt">支付定金后为您的房租保留24小时</div>
            <div class="botf" @click="wpay">
                <span class="iconfont icon-weixin" style="margin-right: 20px;font-size: 26px;"></span>
                <span>微信支付</span>
            </div>
            <!--<div class="bots">
                <span class="iconfont icon-zhifubao0" style="margin-right: 20px;font-size: 26px;"></span>
                <span>支付宝支付</span>
            </div>-->
            <!--<div class="bott">
                <span class="iconfont icon-qianbao" style="margin-right: 20px;font-size: 26px;"></span>
                <span>余额支付</span>
            </div>-->
        </div>
        <md-dialog
                title="提示"
                :closable="false"
                v-model="actDialog.open"
                :btns="actDialog.btns"
        >
            您确认支付吗？
        </md-dialog>
    </div>

</template>

<script>
import { Toast } from 'mint-ui';
import { Dialog, Button } from 'mand-mobile';

export default {
  name: 'pay',
  components: {
    [Dialog.name]: Dialog,
    [Button.name]: Button,
  },
  data() {
    return {
      actDialog: {
        open: false,
        btns: [
          {
            text: '取消',
            handler: this.onActCancel,
          },
          {
            text: '确认',
            handler: this.onActConfirm,
          },
        ],
      },
    };
  },
  methods: {
    wpay() {
      this.actDialog.open = true;
    },
    onActCancel() { /* 取消支付 */
      this.actDialog.open = false;
    },
    async onActConfirm() { /* 确认支付 */
      const _res = await this.$api.post('http://192.168.3.11:7001/user/payisOk', { order_id: this.$route.query.order_id });
      if (_res.data.state) {
        this.actDialog.open = false;
        Toast({
          message: `支付成功${_res.data.info}`,
        });
        setTimeout(()=>{
            this.$router.replace({name:'usercenter'});
        },2000);

      } else {
        Toast({
          message: `支付失败${_res.data.info}`,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
    @import '@/css/public.scss';
    .pay{
        font-family:"Microsoft YaHei";
        display: flex;
        flex-direction:column;
        .top{
            width: 100%;
            height: vw(40);
            font-size: vw(22);
            color: #000000;
            line-height: vw(40);
            text-align: left;
            padding-left: vw(10);
            margin-top: vw(10);
            margin-bottom: vw(100);

        }
        .center{
            width: vw(270);
            height: vw(350);
            margin: 0 auto;
            .txtf{
                height: vw(30);
                width: 100%;
                text-align: center;
                font-size: vw(30);
                line-height: vw(30);
                color: #000000;
                margin-bottom: vw(15);
            }
            .txts{
                height: vw(33);
                width: 100%;
                text-align: center;
                font-size: vw(33);
                line-height: vw(33);
                color: #3a3a3a;
                margin-bottom: vw(10)
            }
            .txtt{
                height: vw(20);
                width: 100%;
                text-align: center;
                font-size: vw(14);
                line-height: vw(20);
                color: #1f1f1f;
                font-weight: bold;
                margin-bottom: vw(40);
            }
            .botf{
                width: 100%;
                height: 56px;
                border-radius: 30px;
                background:-webkit-linear-gradient(top,#96e56d 60%,#72d747);
                color: white;
                text-align: center;
                line-height: 56px;
                font-size: 16px;
                box-shadow: #dfecbd 0px 12px 17px -6px;
                margin-bottom: vw(20);
            }
            .bots{
                width: 100%;
                height: 56px;
                border-radius: 30px;
                background:-webkit-linear-gradient(top,#10a8f1 60%,#0a92ec);
                color: white;
                text-align: center;
                line-height: 56px;
                font-size: 16px;
                box-shadow: #d3e9fb 0px 12px 17px -6px;
                margin-bottom: vw(20);
            }
            .bott{
                width: 100%;
                height: 56px;
                border-radius: 30px;
                background:$public-color;
                color: white;
                text-align: center;
                line-height: 56px;
                font-size: 16px;
                box-shadow: #fecba6 0px 12px 17px -6px;
            }

        }

    }


</style>
